<template>
  <view>
    <view class="gift-box">
      <view class="title">
        <text>收到的礼物</text>
      </view>
      <view class="receipt" v-for="item in gifts" :key="item.id">
        <view class="receipt-item">
          <image :src="item.url" mode="widthFix" class="rose" />
          <text>/{{ item.count }}</text>
        </view>
      </view>
    </view>
    <button class="btn" @click="exchange">兑换金币</button>

    <view class="gift-box">
      <view class="title">
        <text>送出的礼物</text>
      </view>
      <view class="receipt" v-for="item in gift" :key="item.id">
        <view class="receipt-item">
          <image :src="item.url" mode="widthFix" class="rose" />
          <text>/{{ item.count }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { getGiftItemApi, exchangeCoinApi } from '@/services/mygift'
import { onMounted, ref } from 'vue'

const gifts = ref([])
const gift = ref([])
// 获取礼物
const getGift = () => {
  getGiftItemApi().then((res) => {
    gifts.value = res.data.result.send
    gift.value = res.data.result.receive
    console.log(gifts.value)
  })
}
// 兑换金币
const exchange = async () => {
  await exchangeCoinApi()
  getGiftItemApi().then((res) => {
    gifts.value = res.data.result.send
    gift.value = res.data.result.receive
  })
}
onMounted(() => {
  getGift()
})
</script>

<style lang="scss" scoped>
.gift-box {
  display: flex;
  align-items: center;
  width: 90%;
  margin: auto;
  height: 15vh;
  margin-top: 10%;
}
.title {
  font-size: 2vh;
  width: 15vh;
  text-align: center;
}
.receipt {
  display: flex;

  flex: 1;
}
.receipt-item {
  position: relative;
  width: 8vh;
  overflow: hidden;
  text {
    position: absolute;
    bottom: 0;
    font-size: 2vh;
    color: black;
  }
}
.rose {
  width: 5vh;
  height: 5vh;
}
.btn {
  position: absolute;
  align-items: center;
  right: 8%;
  background-color: #40ade3;
  color: white;
  border-radius: 25px;
  margin-top: 1%;
  font-size: 1.5vh;
}
</style>
